import React, { useState, useEffect } from 'react'
import axios from "axios"
import { Space, Table, Modal, Avatar, Descriptions, Typography, Input, Button, message, Popover } from 'antd'
import { ExclamationCircleTwoTone, CheckCircleTwoTone, ClockCircleTwoTone } from '@ant-design/icons'
const { Text, Paragraph } = Typography
const { TextArea } = Input;

const Feedback = () => {
    const [data, setData] = useState([])
    const [isModelOpen, setIsModelOpen] = useState(false)
    const [isReplyModelOpen, setIsReplyModelOpen] = useState(false)
    const [detail, setDetail] = useState({})
    const [reply, setReply] = useState('')

    const columns = [
        {
            title: '',
            dataIndex: 'id',
            key: 'id',
            render: (_, record) => <div>
                {
                    record.resolve
                        ? record.view
                            ?
                            <Popover content='已解决'>
                                <CheckCircleTwoTone twoToneColor="#52c41a" />
                            </Popover>
                            :
                            <Popover content='等待用户查看'>
                                <ClockCircleTwoTone twoToneColor="#1890ff" />
                            </Popover>
                        :
                        <Popover content='待回复'>
                            <ExclamationCircleTwoTone twoToneColor="#eb2f96" />
                        </Popover>
                }
            </div>
        },
        {
            title: '反馈用户',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '反馈内容',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '联系方式',
            dataIndex: 'tele',
            key: 'tele',
        },
        {
            title: '反馈时间',
            dataIndex: 'date',
            key: 'date',
        },
        {
            title: '操作',
            key: 'action',
            render: (record) => (
                <Space size="middle">
                    {/* <a onClick={() => handleDetail(record)}>查看详情</a> */}
                    <Button
                        type="primary"
                        size="small"
                        onClick={() => handleDetail(record)}
                        style={{ backgroundColor: '#FEB955' }}
                    >详情</Button>
                    {
                        record.resolve
                            // ? <Text type="secondary">已回复</Text>
                            ? <Button disabled size="small">已回复</Button>
                            // : <a onClick={() => handleReply(record)}>回复</a>
                            : <Button
                                type="primary"
                                size="small"
                                onClick={() => handleReply(record)}
                                style={{ backgroundColor: '#2197CF' }}
                            >回复</Button>
                    }
                </Space>
            ),
        },
    ]

    useEffect(() => {
        axios.get(`http://localhost:1234/back/feedback`).then(res => {
            console.log(res)
            setData(res)
        })
    }, [isReplyModelOpen])

    const handleDetail = (record) => {
        console.log(record)
        setDetail(record)
        setIsModelOpen(true)
    }

    const handleReply = (record) => {
        console.log(record)
        setDetail(record)
        setIsReplyModelOpen(true)
        setReply('')
    }

    const onChange = (e) => {
        setReply(e.target.value)
    }

    const handleSubmit = () => {
        // console.log(reply)
        axios.post('http://localhost:1234/back/feedback/reply', {
            id: detail.key,
            recontent: reply
        }).then(res => {
            console.log(res)
            if (res == 'ok') {
                message.success('成功')
                setIsReplyModelOpen(false)
            }
        })
    }

    return <div>
        <Table columns={columns} dataSource={data} pagination={{
            // 默认当前页数
            defaultCurrent: 1,
            // 分页器位置
            position: ['bottomCenter'],
            total: data.length
        }} />

        <Modal
            title="详情"
            open={isModelOpen}
            footer={null}
            onCancel={() => setIsModelOpen(false)}
        >
            <Space direction="vertical">
                <Descriptions title="" bordered>
                    <Descriptions.Item label="反馈用户" span={2}>
                        <Avatar src={detail.avatar} />
                        {detail.name}
                    </Descriptions.Item>
                    <Descriptions.Item label="状态" span={1}>
                        {
                            detail.resolve
                                ? detail.view
                                    ?
                                    <Popover content='已解决'>
                                        <CheckCircleTwoTone twoToneColor="#52c41a" />
                                    </Popover>
                                    :
                                    <Popover content='等待用户查看'>
                                        <ClockCircleTwoTone twoToneColor="#1890ff" />
                                    </Popover>
                                :
                                <Popover content='待回复'>
                                    <ExclamationCircleTwoTone twoToneColor="#eb2f96" />
                                </Popover>
                        }
                    </Descriptions.Item>
                    <Descriptions.Item label="联系方式" span={3}>{detail.tele || ""}</Descriptions.Item>
                    <Descriptions.Item label="反馈时间" span={3}>{detail.date}</Descriptions.Item>
                    <Descriptions.Item label="反馈内容" span={3}>{detail.content}</Descriptions.Item>
                    {
                        detail.recontent && <Descriptions.Item label="处理结果" span={3}>{detail.recontent}</Descriptions.Item>
                    }
                </Descriptions>
            </Space>
        </Modal>

        <Modal
            title="回复"
            open={isReplyModelOpen}
            footer={null}
            onCancel={() => setIsReplyModelOpen(false)}
        >
            <Paragraph>
                <pre>{detail.content}</pre>
            </Paragraph>
            <TextArea
                showCount
                maxLength={100}
                style={{
                    resize: 'none',
                    marginBottom: 40
                }}
                onChange={onChange}
                placeholder="用心服务~"
                value={reply}
            />
            <Button
                type="primary"
                onClick={handleSubmit}
                disabled={!reply}
                block
            >回复</Button>
        </Modal>
    </div>
}

export default Feedback